<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!-- jstl -->
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- 引入主题样式 -->
<link
	href="${pageContext.request.contextPath}/themes/bootstrap/easyui.css"
	rel="stylesheet"></link>
<!-- 引入图标样式 -->
<link href="${pageContext.request.contextPath}/themes/icon.css"
	rel="stylesheet"></link>
<!-- 引入jquer -->
<script type="text/javascript"
	src="${pageContext.request.contextPath}/js/jquery-1.9.1.js"></script>
<!-- 引入easyui.js -->
<script type="text/javascript"
	src="${pageContext.request.contextPath}/js/jquery.easyui.min.js"></script>
<!-- 引入本地语言 -->
<script type="text/javascript"
	src="${pageContext.request.contextPath}/js/easyui-lang-zh_CN.js"></script>
<title>商品信息管理</title>
</head>
<script type="text/javascript">
	//jquery 语法
	$(function() {
		//配置数据表格
		$("#proMsg").datagrid({
		loadMsg: "正在努力加载数据，请稍后...",
		//配置查询所有商品的请求
		url : '${pageContext.request.contextPath}/showPro',
		columns : [ [ 
		       		{field : 'checked',checkbox : true,width : 100,},
		       		{field : 'pid',title : '商品编号',width : 100,align : 'center',hidden:'true'}, 
		       		{field : 'pname',title : '商品名',align : 'left'}, 
		       		{field : 'pprice',title : '商品单价',width : 100,align : 'center'},
		       		{field : 'pcount',title : '商品数量',width : 100,align : 'center'}, 
		       		{field : 'pmodel',title : '商品型号',width : 100,align : 'center'}, 
		       		{field : 'psize',title : '商品尺寸',width : 100,align : 'center'}, 
		       		{field : 'pcolor',title : '商品颜色',width : 100,align : 'center'}, 
		       		{field : 'pstate',title : '商品上/下架',width : 100,align : 'center',
			       		formatter: function(value,row,index){
							if (row.pstate==1){
								return "上架";
							} else {
								return "下架";
							}
						}	
		       		}, 
		       		{field : 'cid',title : '商品id',width : 100,align : 'center',hidden:'true'},
					{field : 'cname',title : '商品分类',width : 100,align : 'center'}, 
					{field : 'pintroduce',title : '商品介绍',align : 'left'}, 
		       		{field : 'ppicture',title : '商品图片',width : 100,align : 'center'}, 
		       		] ],
		//功能按钮
		toolbar : [
		           {
		        	   iconCls : 'icon-remove',
		        	   text : '增加',
		        	   handler : function() {
		        		   $("#updateform").form('clear');
		        		   //点击按钮后，窗口打开
		        		   $("#updatewin").window('open');
		        		   //配置增加表单属性
		        		   $("#updateform").form(
		        				   {
		        					   url : '${pageContext.request.contextPath}/addPro',
		        					   success : function(data) {
		        						   if (data == "1") {
		        							   $.messager.alert('提示','增加成功');
		        							   $("#proMsg").datagrid('reload');
		        							   $("#updatewin").window('close');
		        							   $("#updateform").form('clear');
		        							   } else 
		        							   {
		        								   if (data=="0") {
		        									   $.messager.alert('提示','必填项不能为空，请重新输入！');
												}
		        								   
		        								   }
		        						   }
		        					   });
		        		   }
		           },'-',
		           {
		        	   iconCls : 'icon-remove',
		        	   text : '删除',handler : function() {
		        		   //删除功能
		        		   var pros = $("#proMsg").datagrid('getSelections');
		        		   if (pros.length < 1) {
		        			   $.messager.confirm('提示','请选择要删除的数据',function(r) {
		        				   if (r) {
		        					   $("#proMsg").datagrid('reload');
		        					   }
		        				   });
		        			   } else {
		        				   $.messager.confirm('提示','确定删除吗？',function(r) {
		        					   if (r) {
		        						   //不初始化，会出现第一个值始终是NaN的错误
		        						   var pids = 0;
		        						   for (var i = 0; i < pros.length; i++) {
		        							   pids = pids+ pros[i].pid+ ",";
		        							   }
		        						   //使用ajax方式提交删除商品的请求delPro
		        						   $.ajax({
		        							   //配置请求方式
		        							   type : 'post',
		        							   //配置请求地址
		        							   url : '${pageContext.request.contextPath}/delPro',
		        							   //要传到服务器的数据
		        							   data :{"pids" : pids},
		        							   //定义返回的数据类型
		        							   dataType : 'text',
		        							   //请求成功调用函数
		        							   success : function(data) {
		        								   if (data == 1) {
		        									   $.messager.confirm('提示','删除成功',function(r) {
		        										   if (r) {$("#proMsg").datagrid('reload');
		        										   }
		        										   });
		        									   }
		        								   }
		        							   });
		        						   } else {
		        							   $("#proMsg").datagrid('unselectAll');
		        							   }
		        					   });
		        				   }
		        		   }
		           },'-',
		           {
		        	   iconCls : 'icon-remove',
		        	   text : '修改',
		        	   handler : function() {
		        		   $("#updateform").form('clear');
		        		   //配置修改表单，判断选择数据条数
		        		   var pros = $("#proMsg").datagrid(
		        				   'getSelections');
		        		   if (pros.length != 1) {
		        			   $.messager.confirm('提示','请选择一条数据',function(r) {
		        				   if (r) {$("#proMsg").datagrid('unselectAll');
		        				   }
		        				   })
		        				   } else {
		        					   $('#updatewin').window('open');
		        					   var pro = pros[0];
		        					   $('#updateform').form('load', pro);
		        					   }
		        		   //配置修改表单属性
		        		   $("#updateform").form(
		        				   {
		        					   //配置修改商品的请求
		        					   url : '${pageContext.request.contextPath}/updPro',
		        					   success : function(data) {
		        						   if (data == "1") {
		        							   $.messager.alert('提示','更新成功');
		        							   $("#proMsg").datagrid('reload');
		        							   $( "#updatewin").window('close');
		        							   $("#updateform").form('clear');
		        							   } else {
		        								   if (data=="0") {
		        									   $.messager.alert('提示','修改失败:必填项不能为空');
												}
		        								   
		        								   }
		        						   }
		        					   });
		        		   }
		           }
		           ],
		           //行列号
		           rownumbers : true,
		           //斑马线
		           striped : true,
		           //分页
		           pagination : true,
		           //列宽度固定
		           resizable : false,
		           //默认显示记录值
		           pageSize:50,
		           //设置每页记录条数的列表
		           pageList: [30,20,15	],
		           });
		//搜索框
		$("#searchproduct").searchbox({
			height : '30',
			width : '200',
			prompt : '请输入商品名称或商品类别',
			searcher : function(value,name){
				var proname = value;
				$("#proMsg").datagrid('reload',{
					proname:proname
				});
			}
		});
		//增加窗口默认关闭
		$("#updatewin").window('close');
		//配置分页控件属性
		  var p = $('#proMsg').datagrid('getPager');
	        $(p).pagination({
	            //pageList: [50,30,40],//可以设置每页记录条数的列表  
	            beforePageText: '第', //页数文本框前显示的汉字  
	            afterPageText: '页    共 {pages} 页',
	            displayMsg: '',
	            displayMsg: '当前显示 {from} - {to} 条记录   共 {total} 条记录',  
	            onBeforeRefresh:function(){ 
	            $(this).pagination('loading'); 
	            $(this).pagination('loaded'); 
	            }
	        });
 			//验证商品名是否为空
			$("#proname input").blur(function(){
				if ($("#proname input").val()=="") {
					$.messager.alert('提示','商品名必填');
				}
			});
			//验证商品价格是否为空
			$("#proprice input").blur(function(){
				if ($("#proprice input").val()=="") {
					$.messager.alert('提示','商品价格必填');
				}else{
				var reg = /^\+?(\d*\.\d{2})$/;
				var value = $("#proprice input").val();
				if(!reg.test(value)){
					$.messager.alert('提示','请按照元、角、分格式输入商品价格！');
					$("#proprice input").val("");
					return false;
				}
			}
			});
			//验证商品介绍是否为空
			$("#prointroduce input").blur(function(){
				if ($("#prointroduce input").val()=="") {
					$.messager.alert('提示','商品介绍必填');
				}
			});
			//验证商品图片地址是否为空
			$("#propicture input").blur(function(){
				if ($("#propicture input").val()=="") {
					$.messager.alert('提示','商品图片地址必填');
				}
			});
			//验证商品数量是否为空
			$("#procount input").blur(function(){
				if ($("#procount input").val()=="") {
					$.messager.alert('提示','商品数量必填');
				}else{
					var reg = /^[1-9]\d*$/;
					var value = $("#procount input").val();
					if ($("#procount input").val().length>10) {
						$.messager.alert('提示','商品数量最大值为999999999');
						$("#procount input").val("");
					}
					if(!reg.test(value)){
						$.messager.alert('提示','商品数量只能是正整数！');
						$("#procount input").val("");
						return false;
					}
				}
			});
			$('#showall').linkbutton({    
			    onClick:function(value,name){
					var proname = value;
					$("#proMsg").datagrid('reload',{
						proname:proname
					});
				}  
			});  
	});
	//配置表单提交的点击事件 
	function addpro() {
		$("#updateform").form('submit');
	}
	//配置增加表单取消事件
	function canceladd() {
		$("#updatewin").window('close');
		$("#updateform").form('clear');
		$("#proMsg").datagrid('unselectAll');
	}
</script>
<body style="background:url(../images/44.jpg);width: 100%; height: 100%">
	<!-- 搜索框 -->
	<div style="margin-bottom:8px"><input id="searchproduct" class="easyui-searchbox"
		data-options="prompt:'请输入商品名称'">
		<!-- 显示全部商品 -->
	<a id="showall"
			href="javascript:void(0)" class="easyui-linkbutton"
			data-options="iconCls:'icon-man'" 
			style="margin: 5px">显示全部</a>
	</div>
	<!-- 商品详细信息表格 -->
	<table id="proMsg"></table>
	<!-- 更新窗口 -->
	<div id="updatewin" class="easyui-window"
		style="width: 600px; height: 450px; margin-top: 0px; text-align: center"
		title="Update"
		data-options="iconCls:'icon-add',modal:true,shadow:true,resizable:false,draggable:false,maximizable:false, minimizable:false">
		<form id="updateform" method="post" style="margin-top: 20px">
			<div style="display: none; margin-top: 15px">
				<label for="pid">商品编号</label> <input id="pid"
					class="easyui-textbox" name="pid" style="width: 200px"/>
			</div>
			<div style="margin-top: 15px" id="procategory">
				<label for="cid">商品分类</label> <select id="category"
					class="easyui-combobox" name="cname" style="width: 200px;" data-options="editable:false,required:true">
					<c:forEach items="${category}" var="c" >
						<option value="${c.cname}">${c.cname}</option>
					</c:forEach>
				</select>&nbsp*
			</div>
			<div style="margin-top: 15px" id="proname">
				<label for="pname">商品名称</label> <input id="pname"
					class="easyui-textbox validate" name="pname" style="width: 200px" data-options="required:true"/>&nbsp*
			</div>
			<div style="margin-top: 15px" id="proprice">
				<label for="pprice">商品价格</label> <input id="pprice"
					class="easyui-textbox validate" name="pprice" style="width: 200px" data-options="required:true" />&nbsp*
			</div>
			<div style="margin-top: 15px" id="prointroduce">
				<label for="pintroduce">商品介绍</label> <input id="pintroduce"
					class="easyui-textbox validate" name="pintroduce" style="width: 200px" data-options="required:true" />&nbsp*
			</div>
			<div style="margin-top: 15px" id="propicture">
				<label for="ppicture">商品图片</label> <input id="ppicture"
					class="easyui-textbox validate" name="ppicture" style="width: 200px" data-options="required:true" />&nbsp*
			</div>
			<div style="margin-top: 15px" id="procount">
				<label for="pcount">商品数量</label> <input id="pcount"
					class="easyui-textbox validate" name="pcount" style="width: 200px" data-options="required:true" />&nbsp*
			</div>
			<div style="margin-top: 15px">
				<label for="pmodel">商品型号</label> <input id="pmodel"
					class="easyui-textbox" name="pmodel" style="width: 200px" " />&nbsp&nbsp
			</div>
			<div style="margin-top: 15px">
				<label for="psize">商品尺寸</label> <input id="psize"
					class="easyui-textbox" name="psize" style="width: 200px" " />&nbsp&nbsp
			</div>
			<div style="margin-top: 15px">
				<label for="pcolor">商品颜色</label> <input id="pcolor"
					class=easyui-textbox name="pcolor" style="width: 200px" " />&nbsp&nbsp
			</div>
			<div style="margin-top: 15px">
				<label for="pstate">上架下架</label> <select id="pstate"
					class="easyui-combobox" name="pstate" style="width: 200px;"data-options="editable:false,required:true">
	 				<option value="1">上架</option>
					<option value="0">下架</option> 
				</select>&nbsp*
			</div>
			<div style="margin-top: 15px;display:none">
				<label for="pstate">商品id</label> <input id="cid"
					class="easyui-textbox" name="cid" style="width: 200px" " />
			</div>
		</form>
		<a id="addbtn" href="javascript:void(0)" class="easyui-linkbutton"
			data-options="iconCls:'icon-add'" onclick="addpro()"
			style="margin: 5px">确定</a> <a id="cancelbtn"
			href="javascript:void(0)" class="easyui-linkbutton"
			data-options="iconCls:'icon-cancel'" onclick="canceladd()"
			style="margin: 5px">取消</a>
	</div>
</body>
</html>